<template>
    <div class="editor-page">
        <div class="container page">
            <div class="row">

                <div class="col-md-10 offset-md-1 col-xs-12">
                    <ul class="error-messages">
                        <template v-for="(messages, field) in errors">
                            <li v-for="(message, index) in messages" :key="index">{{ field }} {{ message }}</li>
                        </template>
                    </ul>
                    <form @submit.prevent="onSubmit">
                        <fieldset>
                            <fieldset class="form-group">
                                <input type="text" class="form-control form-control-lg" placeholder="Article Title"
                                       v-model="article.title" required>
                            </fieldset>
                            <fieldset class="form-group">
                                <input type="text" class="form-control" placeholder="What's this article about?"
                                       v-model="article.description" required>
                            </fieldset>
                            <fieldset class="form-group">
                                <textarea class="form-control" rows="8" placeholder="Write your article (in markdown)"
                                          v-model="article.body" required></textarea>
                            </fieldset>

                            <fieldset class="form-group">
                                <input type="text" class="form-control" v-model="tag" @keyup.enter="addTag"
                                       placeholder="Enter tags">
                                <div class="tag-list"></div>
                                <span v-for="(item,index) in article.tagList"
                                      class="tag-default tag-pill ng-binding ng-scope" style="margin:5px"
                                      :key="item+index"><i class="ion-close-round" @click="deleteTag(index)"
                                       style="cursor: pointer"></i> {{item}}</span>
                            </fieldset>
                            <button class="btn btn-lg pull-xs-right btn-primary" type="button" @click="onSubmit">
                                Publish Article
                            </button>
                        </fieldset>
                    </form>
                </div>

            </div>
        </div>
    </div>
</template>

 <script>
import { createArticles, getArticle, updateArticles } from '@/api/article'
export default {
    middleware: 'authenticated',
    name: 'editor',
    data() {
        return {
            article: {
                title: '',
                description: '',
                body: '',
                tagList: []
            },
            tag: '',
            errors: {} // 错误信息
        }
    },
    mounted() {
        console.log(this.$route.query.slug)
        if (this.$route.query.slug) {
            this.getArticles(this.$route.query.slug)
        }
    },
    methods: {
        async onSubmit() {
            try {
                const {data}  =this.article.slug?await updateArticles({ article: this.article },this.article.slug):await createArticles({ article: this.article })
                this.$router.push({ name: 'article', params: { slug: data.article.slug } })
                
            } catch (err) {
                console.log(err)
                this.errors = err.response.data.errors
            }
        },
        addTag() {
            if (this.tag) {
                this.article.tagList.push(this.tag)
                this.tag = ''
            }
        },
        deleteTag(index) {
            this.article.tagList.splice(index, 1)
        },
        async getArticles(slug) {
            const { data } = await getArticle(slug)
            console.log(data)
            this.article = { ...data.article }
        }
    }
}
</script>
 <style>
</style>